{% extends 'layout.html' %}
{% load static %}
{% load route %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/course.css' %}">
    <style>
        body {
            background-color: #f6f6f6;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-sm-12" style="margin-top: 10px;margin-bottom: 20px;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 课程列表
                    <span>（共{{ count }}个课程）</span>
                </div>
            </div>
            <div class="course-items">
                {% for item in course_list %}
                    <div class="course-box">
                        <a href="{% gen_play_url request 'play' cid=item.id video_id=0 %}">
                            <dl>
                                <dt>
                                    <img src="{% url 'media' item.cover %}">
                                </dt>
                                <dd>
                                    <div class="name">
                                        <p>{{ item.title }}</p>
                                        <p>{{ item.sub_title }}</p>
                                    </div>
                                    <div class="go">
                                        <p>
                                            <img src="//hcdn2.luffycity.com/media/frontend/activity/course-num_1564141043.723208.svg">
                                            {{ item.teacher }}
                                        </p>
                                        <button>会员免费</button>
                                    </div>
                                </dd>
                            </dl>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}